<template>
	<view>
		<view class="" v-if="Object.keys(datalist).length > 0">


			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration" style="height: 500rpx;">
					<swiper-item v-for="(item,index) in datalist.swiper_img" class="sb">
						<view class="swiper-item uni-bg-red" style="width: 100%;height: 500rpx;">
							<image :src="item" mode="" style="width: 100%;"></image>
						</view>
					</swiper-item>

				</swiper>
			</view>
			<view class="kuai">
				<view style="font-size: 42rpx;color: red;">￥{{price}}</view>
				<view style="margin-top: 15rpx;font-size: 32rpx;">{{datalist.com_name}}</view>
				<view style="font-size: 25rpx;margin-top: 20rpx;color: #797878;">{{datalist.title}}</view>
				<view class="" style="width: 100%;border-top: 1px solid #ebebeb;margin-top:15rpx">

				</view>
				<view
					style="display: flex;justify-content: space-between;font-size: 28rpx;margin-top: 15rpx;color: #909090;">
					<view>销量：{{datalist.sales}}</view>
					<view>库存：{{datalist.stock}}</view>
				</view>
			</view>
			<view class="kuai" style="margin-top: 20rpx;">
				<view class="" style="font-weight: bold;">
					选择套餐
				</view>
				<view class="" style="display: flex;flex-wrap: wrap;">
					<view v-for="(item,index) in datalist.drug" :class="item.checks == 1 ? 'tcitem_choice' : 'tcitem'"
						@click="choice_drug(index)">{{item.name}}</view>
					<!-- <view class="tcitem">完整套餐</view> -->
				</view>
			</view>
			<view class="jieshao_h">
				----- 详情介绍 -----
			</view>
			<view class="kuai">
				<rich-text :nodes="datalist.content"></rich-text>
			</view>
			<view class="" style="height: 170rpx;">

			</view>
			<view class="goumai">
				<view class="goumai_anniu" @click="buynow">
					立即购买
				</view>
			</view>
		</view>
		<view class="" v-else>

		</view>
	</view>
</template>

<script>
	// const plugin = requirePlugin('welifePay');
	var md5 = require('../../components/md5.js')
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 700,

				// 套餐
				device_id: '',
				datalist: {},
				price: 0,
				idlist: '',


			}
		},
		onLoad(option) {
			if (option.scene) {
				this.device_id = option.scene
				this.get_device_com()
			}
			uni.$on('payresult',function(data){
				if(data.referrerInfo.extraData.payStatus == '1'){
					// 支付成功
					uni.reLaunch({
					    url: '/pages/device/payok' // 假设你想跳转到的页面路径是 /pages/index/index
					  });
				}
					console.log('aaaaaa')
					console.log(data)
				})
			console.log(option)
		},
		onShow(options) {
			console.log('onshow内容')
			console.log(options)
		},
		methods: {
			// 立即购买
			buynow() {
				var that = this

				if (uni.getStorageSync('payuserinfo')) {
					that.add_order()
				} else {
					wx.login({
						success: function(res) {
							if (res.code) {
								var code = res.code; //获取到用户的code，准备发送给后端服务器
								console.log('登录code', code)
								uni.request({
									url: that.global.url + 'api/device/add_payuser',
									method: 'POST',
									data: {
										code: code
									},
									success(res) {
										let result = res.data
										console.log(result)
										if (result.code == 1) {
											// 存用户信息
											uni.setStorageSync('payuserinfo', result.data)
											that.add_order()
										} else {
											uni.showToast({
												title: result.msg,
												icon: 'none'
											})
										}
									},
									complete() {
										// uni.hideLoading()
									}
								})
								// 将code发送给后端服务器，后端服务器使用code去微信服务器换取openid
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					});
				}


			},
			add_order() {
				var that = this

				let payuser = uni.getStorageSync('payuserinfo')
				var params = {
					device_id: that.device_id,
					idlist: that.idlist,
					payuser_id: payuser.id,
					paymoney: that.price
				}
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: this.global.url + 'api/device/add_order',
					method: 'POST',
					data: params,
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							console.log(result)
							// console.log( result.data.payinfo.respData.path)
							console.log(result.data.payinfo.code)
							if(result.data.payinfo.code == 1001){
								uni.reLaunch({
								    url: '/pages/device/payok' // 假设你想跳转到的页面路径是 /pages/index/index
								  });
							}else if(result.data.payinfo.code == '0000'){
								wx.openEmbeddedMiniProgram({
									appId: "wx30dff80de3fb2e0a",
									path: result.data.payinfo.respData.path,
									envVersion: 'release',
									success(res) {
										// 打开成功
										console.log(res);
									}
								
								})
							}else{
								uni.showToast({
									title: result.msg,
									icon: 'error'
								})
							}
							

						} else if(result.code == 1001){
							// 直接支付成功
							uni.navigateTo({
								url:'/pages/device/payok'
							})
						}else {
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			get_device_com() {
				var that = this
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: this.global.url + 'api/device/device_com',
					method: 'POST',
					data: {

					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							// 存用户信息
							that.datalist = result.data
							that.countprice()
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			choice_drug(index) {
				if (this.datalist.drug[index].id == 0) {
					// 清空其他
					for (var i = 0; i < this.datalist.drug.length; i++) {
						this.datalist.drug[i].checks = 0
					}
				} else {
					this.datalist.drug[index].checks
					for (var i = 0; i < this.datalist.drug.length; i++) {
						if (this.datalist.drug[i].id == 0) {
							this.datalist.drug[i].checks = 0
						}

					}
				}
				if (this.datalist.drug[index].checks == 1) {
					this.datalist.drug[index].checks = 0
				} else {
					this.datalist.drug[index].checks = 1
				}
				this.countprice()
			},
			countprice() {
				var price = 0
				var idlist = []
				for (var i = 0; i < this.datalist.drug.length; i++) {
					if (this.datalist.drug[i].checks == 1) {
						idlist.push(this.datalist.drug[i].id)
						price += parseFloat(this.datalist.drug[i].price)
					}
				}
				this.idlist = idlist.join(',')
				this.price = price.toFixed(2)
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.sb {
		height: 500rpx;
	}

	.kuai {
		width: 90%;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0px auto;
		margin-top: 10rpx;
	}

	.tcitem {
		padding: 15rpx 25rpx;
		background-color: #f4f4f4;
		border: 1px solid #f4f4f4;
		text-align: center;
		border-radius: 40rpx;
		font-size: 26rpx;
		margin-right: 15rpx;
		margin-top: 22rpx;

	}

	.tcitem_choice {
		padding: 15rpx 25rpx;
		background-color: #f4f4f4;

		text-align: center;
		border-radius: 40rpx;
		font-size: 26rpx;
		margin-right: 15rpx;
		margin-top: 22rpx;
		border: 1px solid #e15e60;
		color: red;
	}

	.jieshao_h {
		text-align: center;
		font-size: 22rpx;
		margin: 15rpx;
		color: #797979;
	}

	.goumai {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 150rpx;
		background-color: #fff;


	}

	.goumai_anniu {
		padding: 24rpx;
		background: #494ffd;
		color: #fff;
		text-align: center;
		width: 88%;
		margin: 0px auto;
		border-radius: 20rpx;
		margin-top: 15rpx;
	}
</style>